<template>
  <div class="more-container">
    <div class="innerstudent">
      <el-form
        ref="topstudentform"
        :model="topstudentforms"
        :rules="rules"
        size="small"
        label-width="92px"
      >
        <el-row>
          <el-col :span="4">
            <el-row>
              <el-form-item label-width="0" prop="username">
                <el-input
                  v-model="topstudentforms.username"
                  placeholder="学员姓名/手机号"
                  clearable
                  :style="{ width: '93%' }"
                ></el-input>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row>
              <el-form-item label-width="0" prop="subject_title">
                <el-input
                  v-model="topstudentforms.subject_title"
                  placeholder="班型名称"
                  clearable
                  :style="{ width: '93%' }"
                ></el-input>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row>
              <el-form-item label-width="0" prop="team_id">
                <treeselect v-model="topstudentforms.team_id" :options="treeOptions" :default-expand-level="1" :normalizer="normalizer"
                  placeholder="请选择关联机构" />
              <!--  <el-select
                  v-model="topstudentforms.school"
                  placeholder="关联机构"
                  clearable
                  :style="{ width: '93%' }"
                >
                  <el-option
                    v-for="(item, index) in schoolOptions"
                    :key="index"
                    :label="item.title"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select> -->
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row>
              <el-form-item label-width="0" prop="gettype">
                <el-select
                  v-model="topstudentforms.gettype"
                  placeholder="申领类型"
                  clearable
                  :style="{ width: '93%' }"
                >
                  <el-option
                    v-for="(item, index) in gettypeOptions"
                    :key="index"
                    :label="item.title"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row>
              <el-form-item label-width="0" prop="paytype">
                <el-select
                  v-model="topstudentforms.paytype"
                  placeholder="交费类型"
                  clearable
                  :style="{ width: '93%' }"
                >
                  <el-option
                    v-for="(item, index) in paytypeOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row></el-row>
          </el-col>
        </el-row>
      </el-form>
      <!-- 搜索栏 -->
      <commonline
        style="margin-top: 10px"
        :importname="'学员'"
        :newText="'学员'"
        @addList="additem"
        @refreshData='refreshData'
        :isshowImport="checkPermission(['intentionImport'])"
        :isshowAdd="checkPermission(['intentionAdd'])"
        :importUrl='"student/import"'
        :dUrl='"https://oss.juchehulian.com/Excel/%E5%AD%A6%E5%91%98%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xls"'
        @searchlist="searchlist"
        @resetform="resetform"
      ></commonline>
      <!-- 弹窗 -->
      <intentioneditdialog
        :isshowDialog="isshowStudentDialog"
        :dialogTitle="dialogTitle"
        :formType="formtype"
         @confirm="confirm"
        @closedialog="closedialog"

      ></intentioneditdialog>
      <!-- 报名弹窗 -->
      <intentiondialog  :isshowDialog='isshowapplyDialog' :dialogTitle='"学员报名"' @confirm='confirmapply'  @closedialog="closeapplydialog"></intentiondialog>
      <!-- 列表 -->
      <intentionTable v-if="issuTableData"  @deleteitem='deleteitem' @applyopen='applyopen' @openedit="openedit" :tabData="tabList" @changepageTotal="changepageTotal" @changepage="changepage"></intentionTable>
    </div>
  </div>
</template>

<script>
//报名弹窗
import intentiondialog from './component/intentiondialog'
import intentioneditdialog from './component/intentioneditdialog'
import commonline from '@/components/commonline/commonline'
import intentionTable from './component/intentionTable'
import { getSessionStorage } from '@/utils/accessToken'
import Treeselect from "@riophae/vue-treeselect"; //下拉树组件
//api
import { studentList,deleteData } from '@/api/student'
//按钮权限验证
import checkPermission from '@/utils/permission'
export default {
  data() {
    return {
      //是否显示报名弹窗
      isshowapplyDialog:false,
      //是否成功加载表格数据
      issuTableData:false,
      //弹窗标题
      dialogTitle:'新增学员',
      //翻页总数
      pageTotal: 10,
      //第几页
      page: 1,
      //表格数据
      tabList: {},
      //新增还是编辑
      formtype: 0,
      //是否显示dialog
      isshowStudentDialog: false,
      topstudentforms: {
        username: '',
        subject_title: '',
        team_id:null,
        gettype: '',
        paytype: '',
      },
      rules: {
        username: [],
        sub_title: [],
        team_id: [],
        gettype: [],
        paytype: [],
      },
      schoolOptions: [],
      treeOptions: [],
      gettypeOptions: [],
      paytypeOptions: [
        {
          label: '全款',
          value: 1,
        },
        {
          label: '分期',
          value: 2,
        },
      ],
    }
  },
  components: {
    intentiondialog,
    commonline,
    intentionTable,
    intentioneditdialog,
    Treeselect
  },
  methods: {
    //按钮权限验证
    checkPermission,
    //报名成功
    confirmapply(){
      //关闭弹窗
      this.isshowapplyDialog = false
      // 刷新列表
      this.getstudentList(this.page, this.pageTotal)
       this.$alert('请到学员管理-学员列表进行后续操作！', '报名成功！', {
          confirmButtonText: '确定',
          callback: action => {
            //关闭弹窗
          }
        });
    },
    //关闭报名
    closeapplydialog(){
      this.isshowapplyDialog = false
    },
    //打开报名弹窗
    applyopen(id){
      this.$bus.emit('applyformStudent', id)
      this.isshowapplyDialog = true
    },
    //上传成功刷新数据
    refreshData(){
       this.getstudentList(this.page, this.pageTotal)
    },
     //删除
    async deleteitem(id){
      let params = {
        id:id
      }
      //询问客户是否删除
       this.$confirm('您确认要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let data = await deleteData(params)
          if(data.code=='0000'){
            this.$message({
            type: 'success',
            message: '删除成功!'
          });
          }
          //刷新列表
         this.getstudentList(this.page, this.pageTotal)

        }).catch(() => {

        });
    },
    confirm() {
      this.isshowStudentDialog = false
      //刷新列表
      this.getstudentList(this.page, this.pageTotal)
    },
    //总数翻页
    changepageTotal(val) {
      this.pageTotal = val
      this.getstudentList(this.page, this.pageTotal)
    },
    //翻页
    changepage(val) {
      this.page = val
      this.getstudentList(this.page, this.pageTotal)
    },
    //获取意向学员列表
    async getstudentList(page = 1, rows = 10) {
      let params = {
        page,
        rows,
        type:1,
        _request:1
      }
      if (this.topstudentforms.username) {
        params.keyword = this.topstudentforms.username
      }
      if (this.topstudentforms.subject_title) {
        params.subject_title = this.topstudentforms.subject_title
      }
      if (this.topstudentforms.team_id) {
        params.team_id = this.topstudentforms.team_id
      }
      if (this.topstudentforms.gettype) {
        params.apply_type = this.topstudentforms.gettype
      }
      if (this.topstudentforms.paytype) {
        params.pay_type = this.topstudentforms.paytype
      }
      let data = await studentList(params)
      this.tabList = data.data
      this.issuTableData = true
    },
    //编辑
    openedit(val) {

      this.$bus.emit('editformStudent', val)
      this.formtype = val.type
      this.dialogTitle = '编辑学员'
      this.isshowStudentDialog = true
    },
    //弹窗
    additem() {
      this.dialogTitle = '新增学员'
      this.isshowStudentDialog = true
    },
    //关闭弹窗
    closedialog() {
      this.formtype = 0
      this.isshowStudentDialog = false
    },
    // 搜索
    searchlist() {
      this.$message({
            type: 'success',
            message: '查询成功!'
          });
      this.getstudentList(this.page, this.pageTo)
    },
    normalizer(node) {
      return {
        id: node.id,
        label: node.title,
        children: node.children,
      }
    },
    //重置
    resetform() {
      this.$refs['topstudentform'].resetFields()
      this.$message({
        type: 'success',
        message: '已重置!',
      })
      this.getstudentList(this.page, this.pageTo)
    },
  },
  mounted() {
    this.getstudentList(this.page, this.pageTo)
    //设置所属校区
    this.schoolOptions = getSessionStorage('Optionsall')['school']
    //申领类型
    this.gettypeOptions = getSessionStorage('Options')[1]
      this.treeOptions = getSessionStorage('Optionsall').team
  },
}
</script>

<style scoped lang='scss'>
</style>
